<script setup>
import HelloWorld from '@/components/HelloWorld.vue'
import { useStore } from 'vuex'
import { Button, message } from 'ant-design-vue';
const store = useStore()

const [messageApi, contextHolder] = message.useMessage();

const  countAdd = () => {
  messageApi.info('Hello, Ant Design Vue!');
  store.commit('increment')
}

</script>

<template>
  <div class="box">
    <button @click="countAdd">添加store count</button>
    <div>count {{ store.state.count  }}</div>
    <a-button type="primary">1233</a-button>
  </div>
  <router-view></router-view>
  <HelloWorld msg="Vite + Vue" />
</template>

<style scoped lang="less">
.box {
  .logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
  }
  .logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
  }
  .logo.vue:hover {
    filter: drop-shadow(0 0 2em #42b883aa);
  }
}
</style>
